<template>
	<view class="qiuqian_box">

		<view v-if="!qianwen">
			<view class="qiuqian_results">
				<view class="result_content">
					<view v-if="throwNum > 0">
						<view>壹</view>
						<image :src="results2[0]"></image>
					</view>
				</view>
				<view class="result_content">
					<view v-if="throwNum > 1">
						<view>贰</view>
						<image :src="results2[1]"></image>
					</view>
				</view>
				<view class="result_content">
					<view v-if="throwNum > 2">
						<view>叁</view>
						<image :src="results2[2]"></image>
					</view>
				</view>
			</view>
			<view class="qiuqian_img" :class="{ 'animate': isAnimating, 'result': showResult }"
				:style="{ backgroundImage: resultImage }">
			</view>
			<view class="qiuqian_btn" @click="startThrow" v-if="!resultText">{{ showText ? '再掷一次' : '开始投掷' }}</view>
			<view class="qiuqian_btn" @click="showQianwen" v-if="resultText">查看签文</view>
		</view>

		<view v-if="qianwen">
			<view class="qiuqian_img1">
				<image :src="qianwen_img" mode="widthFix"/>
			</view>
			<view class="qiuqian_btn" @tap="goto" data-url="/pages/index/index">回到首页</view>
			<view class="qiuqian_btn" @click="onLongPressImage">收藏签文</view>
			<view class="qiuqian_btn" @click="xianxiaOpen">线下解签</view>
		</view>

		<view v-if="xianxia">
			<view class="overlay" @click="xianxiaClose"></view>
			<view class="xianxia_img" >
				<view class="" @click="xianxiaClose" style="color: white; font-size: 24px;text-align: right">×</view>
				<image :src="map_images" mode="widthFix"></image>
			</view>
		</view>
		


	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			isAnimating: false,
			showResult: false,
			showText: false,
			resultImage: '',
			resultText: false,
			throwNum: 0,
			qiuqian_img1: [
				'https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/17d0174ed4e63caa52ab0bdb7b5a02e6.png',
				'https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/3755d36b89eb94a9eba056a2e9a458f3.png',
				'https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/b84191b6d15528f3b7c0a9f74817017a.png'
			],
			qiuqian_img2: [
				'https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/2cba07c36eddb134c581d1893d0c898f.png',
				'https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/fb79262db0e5d6f373f43335eeb9060a.png',
				'https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/13a4c415aab26192f89e742a5a4fe7f1.png'
			],
			results1: [],
			results2: [],
			qianwen: false,
			qianwen_img: null,
			qiuqian_id: null,
			xianxia:false,
			map_images:false,
		}
	},
	methods: {
		xianxiaOpen(){
			this.xianxia = true;
		},
		xianxiaClose(){
			this.xianxia = false;
		},
		
		onLongPressImage() {
			// 获取图片的 URL
			// const imageUrl = this.qianwen_img

			// // 1. 显示分享菜单（需提前在页面配置中启用分享）
			// uni.showActionSheet({
			// 	itemList: ['收藏', '保存图片'],
			// 	success: (res) => {
			// 		if (res.tapIndex === 0) {
			// 			// 点击分享
			// 			this.shareImage(imageUrl);
			// 		} else if (res.tapIndex === 1) {
			// 			// 点击保存
			// 			this.saveImage(imageUrl);
			// 		}
			// 	}
			// });

			wx.downloadFile({
				url: this.qianwen_img,
				success: (res) => {
					wx.showShareImageMenu({
						path: res.tempFilePath
					})
				}
			})

		},

		// 保存图片到手机
		saveImage(imageUrl) {
			uni.downloadFile({
				url: imageUrl,
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								title: '图片已保存到手机',
								icon: 'success'
							})
						},
						fail: () => {
							uni.showToast({
								title: '图片保存失败',
								icon: 'error'
							})
						}
					})
				}
			})
		},

		showQianwen() {
			this.qianwen = true;
		},

		async startThrow() {
			if (this.throwNum == 0) {
				try {
					await this.getQiuqianData(); // 等待接口完成
				} catch (err) {
					return; // 如果接口失败，直接退出
				}
			}

			if (this.isAnimating) return;

			// 重置状态
			this.isAnimating = true;
			this.showResult = false;
			this.resultImage = '';

			// 播放投掷动画
			setTimeout(() => {
				this.isAnimating = false;
				this.showResult = true;
				this.showText = true;
				this.throwNum += 1;
				if (this.throwNum == 3) {
					this.resultText = true;
					app.post('ApiQiuqian/addqiuqianlog', {
						qiuqian_id: this.qiuqian_id
					}, function (res) {
						// console.log(res);
					});
				}
				const resultIndex = (this.throwNum - 1) % this.results1.length;
				this.resultImage = `url(${this.results1[resultIndex]})`;

			}, 1500);
		},
		//获取推荐数据
		getQiuqianData() {
			return new Promise((resolve, reject) => {
				app.post('ApiQiuqian/qiuqianindex', {}, (res) => {
					if (res.status == 1) {
						this.qiuqian_id = res.data.id;
						this.results1 = [
							this.qiuqian_img1[res.data.sheng_one_sn - 1],
							this.qiuqian_img1[res.data.sheng_two_sn - 1],
							this.qiuqian_img1[res.data.sheng_three_sn - 1]
						];
						this.results2 = [
							this.qiuqian_img2[res.data.sheng_one_sn - 1],
							this.qiuqian_img2[res.data.sheng_two_sn - 1],
							this.qiuqian_img2[res.data.sheng_three_sn - 1]
						];
						this.qianwen_img = res.data.images;
						this.map_images = res.data.map_images;
						resolve(res); // 接口成功时 resolve
					} else {
						uni.showToast({ title: res.message, icon: 'none' });
						this.throwNum = 0;
						reject(res.message); // 接口失败时 reject
					}
				});
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.qiuqian_box {
	background: transparent;
	height: 100vh;
	background-image: url('https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/7828d501495ae83a68db2bced8fcf877.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.qiuqian_results {
	padding: 50px 30px;
	height: 300px;
	display: flex;
	justify-content: space-between;

	.result_content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;

		image {
			height: 70px;
			width: 60px;
			object-fit: contain;
		}

		view {
			margin-bottom: 10px;
			font-size: 22px;
			color: #851b1f;
			font-family: cursive;
			font-weight: bold;
		}
	}

}

.qiuqian_img {
	margin: 0 auto;
	width: 130px;
	height: 300px;
	margin-bottom: 30px;
	background-image: url('https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/21a5d6628bae580dc73417da867842b7.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	// transition: all 0.3s ease;

	&.animate {
		width: 300px;
		background-image: url('https://mazugift.oss-cn-fuzhou.aliyuncs.com/upload/3/20250806/e4bc9287ef44cfeeb247f9518a4c72c5.png');
	}

	&.result {
		width: 300px; // 结果图片的尺寸
		background-size: contain;
	}
}

.qiuqian_img1 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 0 10px;

	image {
		width: calc(100% - 145px);
		background: gray;
		border-radius: 10px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	}

}

.qiuqian_btn {
	margin: 0 auto;
	margin-top: 10px;
	padding: 5px 0;
	text-align: center;
	width: 180px;
	background: linear-gradient(90deg, #dbb085 0%, #f5e5d5 50%, #eedfc6 100%);
	border-radius: 20px;
	color: #751516;
	font-size: 18px;
	font-family: cursive !important;
	font-weight: bold;
	letter-spacing: 8px;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 101;
}

.xianxia_img {
	width: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.75);
	z-index: 102;
	// background-color: #fff;
	// border-radius: 20px;
	// padding: 30px;
	// box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	image{
		// width: calc(100% - 10px);
		// height:  calc(100% - 100px) ;
		width: 100%;
	}
}
</style>
